<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script th:src="@{webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script th:src="@{webjars/bootstrap/5.0.2/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{webjars/bootstrap/5.0.2/css/bootstrap.min.css}">
    <script th:src="@{webjars/zTree/3.5.37/js/jquery.ztree.all.min.js}"></script>
    <link rel="stylesheet" th:href="@{webjars/zTree/3.5.37/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-4">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="col-4">
            <div class="input-group mb-1">
                <input type="text" id="sub-node-input"
                       class="form-control" placeholder="输入子节点id查找子树"
                       aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" onclick="searchSubTree()" type="button">Button</button>
                </div>
            </div>
            <ul id="subTreeDemo" class="ztree"></ul>
        </div>
    </div>

</div>
</body>
<script language="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        view: {
            // addHoverDom: addHoverDom,
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeDrop: beforeDrop,
            onDrop: nodeOnDrop
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    $(document).ready(function () {
        $.get("/tree", function (resp) {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, resp);
        })
    });

    function beforeDrag(treeId, treeNodes) {
        // console.log("Drag: ", treeNodes)
    }

    function searchSubTree() {
        let nodeId = $("#sub-node-input").val()
        $.get("/tree?nodeId=" + nodeId, function (resp) {
            zTreeObj = $.fn.zTree.init($("#subTreeDemo"), setting, resp);
        })
    }

    function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
        console.log("source : ", treeNodes[0].pId)
        console.log("target : ", targetNode)
        console.log(moveType, isCopy)
        // $.get("/tree", function (resp) {
        //     zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, resp);
        // })


    }

    function nodeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
        console.log("nodeOnDrop source : ", treeNodes[0].pId)
        console.log("nodeOnDrop target : ", targetNode)

        $.post({
            url: "tree/move",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({
                sourceId: treeNodes[0].id,
                sourcePid: treeNodes[0].pId,
                targetId: targetNode.id,
                direction: moveType
            }),
            success: function (resp) {
                if (!resp.success) {
                    alert(resp.msg)
                    $.get("/tree", function (resp) {
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, resp);
                    })
                }
            }
        });


    }


</script>
</html>